<template>
  <a-spin wrapperClassName="page-webview" :spinning="loading">
    <!-- <transition name="no-mode-absolute-fade"> -->
      <iframe
        @load="onLoadIFrame"
        ref="iframe"
        :src="currentUrl"
        :key="webViewKey"
      ></iframe>
    <!-- </transition> -->
  </a-spin>
</template>

<script>
export default {
  data() {
    const url = (this.$route.query.p || "") 
    return {
      loading: false,
      showUrl: url,
      currentUrl: url,
      webViewKey: 0,
    };
  },
  created() {
    this.url = this.$route.query.p || "";
    console.log("this.url", this.url);
  },

  watch: {
    '$route' (newVal) {
      console.log('$route', this.showUrl, newVal.query.p, newVal.query.p !== this.showUrl)
      if (newVal.query.p !== this.showUrl) {
        this.loading = true
        if (newVal.query.p === this.currentUrl) {
          this.webViewKey++
        }
        this.currentUrl = newVal.query.p
      }
      this.showUrl = newVal.query.p
    }
  },
  methods: {
    onLoadIFrame() {
      this.loading = false
      console.log('this.$refs.iframe', this.$refs.iframe)
      const location = this.$refs.iframe.contentDocument.location
      const url = location.pathname + location.search + location.hash
      console.log('urlxxx', url, this.showUrl)
      if (url !== this.showUrl) {
        this.showUrl = url
        this.$router.push('/web/?p=' + url)
      }
      // this.$refs.iframe.style.height = (this.$refs.iframe.contentWindow.jQuery('body').outerHeight() + 50) + 'px'
    },
  },
};
</script>

<style>
.page-webview, .page-webview .ant-spin-container {
  height: 100%;
}
.page-webview iframe {
  border: none;
  width: 100%;
  height: 100%;
}


</style>
